var productList = JSON.parse(localStorage.getItem('productList')) || []

let stateAll = false //全选状态

const rootEle = document.querySelector('.cart-list')

// 动态渲染表格
function loadProductList() {
    let str = `<table>
                <tr>
                    <th><input type="checkbox"  ${stateAll ? 'checked' : ''} name="checkall">全选框</th>
                    <th>商品图片</th>
                    <th>商品信息</th>
                    <th>商价</th>
                    <th>数量</th>
                    <th width="100px">总价</th>
                    <th>操作</th>
                </tr>`
    //循环遍历商品数组，拼接商品列表成表格项tr字符串
    let newArray = productList.map(item => {
        return `<tr>
                    <td><input type="checkbox" name="checksingle"  ${item.state ? 'checked' : ''} data-index="${item.id}"></td>
                    <td><img src="${item.url}" alt=""></td>
                    <td>${item.name}</td>
                    <td>￥${item.price}</td>
                    <td><input type="button" name="minus" value="-" data-index="${item.id}" ${item.num == 0 ? 'disabled' : ''}><input type="text" name="amount" value="${item.num}" data-index="${item.id}"><input
                            type="button" name="plus" value="+" data-index="${item.id}"></td>
                    <td class="single-price">￥${item.singlePrice ? item.singlePrice : '0.00'}</td>
                    <td> <a href="#">移入收藏</a><br><a href="#" class="del" data-index="${item.id}">删除</a></td>
                </tr>`
    })
    let trStr = newArray.join('')

    str = str + trStr + '</table>' + `<h2>商品总价:<span class="total-price">￥${priceSum()}</span></h2>`

    rootEle.innerHTML = str
}

loadProductList()
// 实现改变商品数量,删除商品
function jQueryClick() {
    // 商品增加
    $('#container .cart-list').on('click', 'input[name="plus"]', function (e) {
        target = e.target || e.srcElement
        productList = JSON.parse(localStorage.getItem('productList')) || []
        let id = $(target).attr('data-index')
        let index = productList.findIndex(item => item.id == id)
        productList[index].num++

        localStorage.setItem('productList', JSON.stringify(productList))
        singlePrice(index) //计算总价
        loadProductList()  // 刷新页面
    })
    // 商品减少
    $('#container .cart-list').on('click', 'input[name="minus"]', function (e) {
        target = e.target || e.srcElement
        productList = JSON.parse(localStorage.getItem('productList')) || []
        let id = $(target).attr('data-index')
        let index = productList.findIndex(item => item.id == id)
        productList[index].num--
        localStorage.setItem('productList', JSON.stringify(productList))
        singlePrice(index)  //计算总价
        loadProductList()  // 刷新页面
    })
    // 输入商品数量
    $('#container .cart-list').on('change', 'input[name="amount"]', function (e) {
        target = e.target || e.srcElement
        // 获取输入框当前值
        productList = JSON.parse(localStorage.getItem('productList')) || []
        let num = $(target).val()
        let reg = /^\d{0,2}$/
        let id = $(target).attr('data-index')
        let index = productList.findIndex(item => item.id == id)
        if (reg.test(num)) {
            productList[index].num = num
            localStorage.setItem('productList', JSON.stringify(productList))
            singlePrice(index)    //计算总价
            loadProductList()    // 刷新页面
        } else {
            num = 0
            productList[index].num = num
            localStorage.setItem('productList', JSON.stringify(productList))
            singlePrice(index)         //计算总价
            loadProductList()         // 刷新页面
        }
    })
    // 删除商品
    $('#container .cart-list').on('click', '.del', function (e) {
        target = e.target || e.srcElement
        productList = JSON.parse(localStorage.getItem('productList')) || []
        e.preventDefault()
        let id = $(target).attr('data-index')
        let index = productList.findIndex(item => item.id == id)
        productList.splice(index, 1)
        localStorage.setItem('productList', JSON.stringify(productList))
        loadProductList()    // 刷新页面
    })
}

jQueryClick()

// 计算单项总价
function singlePrice(index) {
    productList = JSON.parse(localStorage.getItem('productList')) || []
    let product = productList[index]
    product.singlePrice = (product.num * product.price).toFixed(2)
    localStorage.setItem('productList', JSON.stringify(productList))
}

// 实现全选
function stateChecked() {
    $('#container .cart-list').on('click', 'input[name="checkall"]', function (e) {
        productList = JSON.parse(localStorage.getItem('productList')) || []
        target = e.target || e.srcEvent
        stateAll = !stateAll
        productList.forEach(item => item.state = stateAll)
        localStorage.setItem('productList', JSON.stringify(productList))
        loadProductList()  // 刷新页面
    })
    $('#container .cart-list').on('click', 'input[name="checksingle"]', function (e) {
        target = e.target || e.srcEvent
        productList = JSON.parse(localStorage.getItem('productList')) || []
        let id = $(target).attr('data-index')
        let index = productList.findIndex(item => item.id == id)
        productList[index].state = !productList[index].state
        stateAll = productList.every(item => item.state == true)
        localStorage.setItem('productList', JSON.stringify(productList))
        loadProductList()  // 刷新页面
    })
}
stateChecked()

// 计算总价
function priceSum() {
    return productList.reduce((s, item) => s += item.state ? Number(item.singlePrice) : 0, 0).toFixed(2)

}

// 点击隐藏、显示添加表单



